<template>
    <div class="map_box pd10">
      <div class="map_right" style="width: 100%;">
        <div class="num_box">
          <p>
            <b>100+</b>
            <span>设计需求</span>
          </p>
          <p>
            <b>30+</b>
            <span>设计中心</span>
          </p>
          <p>
            <b>10+</b>
            <span>重点行业</span>
          </p>
          <p>
            <b>300+</b>
            <span>设计人才</span>
          </p>
        </div>
        <div class="map" style="padding-left: 0;">
          <div class="map_bg" style="width: 100%;">
            <div id="mapBox"></div>
            <!-- <img src="../../../assets/images/index/icon_adirs.png" class="address"> -->
          </div>
        </div>
      </div>
    </div>
</template>

<script>
import { listInformation } from "@/api/portal/information";
import symbolImg from '../../../assets/images/index/icon_adirs.png'
import hunan from '../../bigScreen/hn.json'
export default {
  name:'Map',
  data(){
    return{
      data:[
        {
          name:'长沙市',
          value:20
        },
        {
          name:'张家界市',
          value:50
        },
      ]
    }
  },
  created(){
    
  },
  mounted(){
    this.mapInit();
  },
  
  methods:{
    //地图
    mapInit(){
      let option;
      const myChart = this.$echarts.init(document.getElementById("mapBox"));
      var geoCoordMap = {
        '怀化市':[109.999867, 27.518949],
        '湘西土家族苗族自治州':[109.741528, 28.332629],
        '张家界市':[110.491722, 29.112001],
        '常德市':[111.701486, 29.076683],
        '益阳市':[112.348741, 28.544124],
        '岳阳市':[113.126486, 29.382401],
        '长沙市':[113.019455, 28.200103],
        '株洲市':[113.163141, 27.8418],
        '湘潭市':[112.91977, 27.882141],
        '邵阳市':[111.467859, 27.21915],
        '娄底市':[112.012438, 27.745506],
        '衡阳市':[112.63809, 26.895225],
        '永州市':[111.577632, 26.460144],
        '郴州市':[113.039396, 25.81497],
      }
      var data = this.data
      var convertData = function (data) {
        var res = [];
        for (var i = 0; i < data.length; i++) {
          var geoCoord = geoCoordMap[data[i].name];
          if (geoCoord) {
            res.push({
              name: data[i].name,
              value: geoCoord.concat(data[i].value)
            });
          }
        }
        return res;
      };
      option = {
        title: {
          text: '',
          subtext: '',
          x: 'center',
          textStyle: {
              color: '#ccc'
          }
        },
        tooltip: {
          trigger: 'item',
          formatter: function (params) {
            if (typeof (params.value)[2] == "undefined") {
                return params.name + ' : ' + params.value;
            } else {
                return params.name + ' : ' + params.value[2];
            }
          }
        },
        geo: [
          {
            map: 'map',
            left: 'center',
            top: '12%',
            label: {
              normal: {
                position: 'center',
                show: false,
                color: '#fff',
              },
              emphasis: {
                show: true,
                color:'#fff'
              }
            },
            roam:false,
            itemStyle: {
              normal: {
                borderColor: 'rgba(124, 191, 232,1)',
                color: '#07427c',
                borderWidth: 1,
                shadowBlur: 0,
              },
              emphasis: {
                  areaColor: '#1188c5',
              },
            },
            zlevel: 3,
          },
          {
            map: 'map',
            left: 'center',
            top: '14%',
            label: {
              normal: {
                show: false
              },
              emphasis: {
                show: false,
              }
            },
            roam:false,
            itemStyle: {
              borderColor: 'rgba(81, 148, 239,0)',
              borderWidth: 6,
              areaColor: '#3574a0',
            },
            label:{
              normal: {
                position: 'bottom',
                show:false,
                color: '#fff',
              }
            },
            emphasis: {
                itemStyle: {
                  areaColor: '#3574a0',
                },
                label: {
                    show: 0,
                    color: '#fff',
                },
            },
            zlevel: 2,
          },
          
          // 底部重影层
          {
            map: 'map',
            left: 'center',
            top: '14.8%',
            // aspectScale: 1,
            roam: false, // 是否允许缩放
            // zoom: 1.2, // 默认显示级别
            // silent: true,
            // layoutSize: '60%',
            // layoutCenter: ['29.6%', '51.5%'],
            itemStyle: {
                borderColor: '#3574a0',
                borderWidth: 1,
                areaColor: '#3574a0',
            },
            zlevel:1,
          },
        ],
        series: [
          {
            name: '点',
            type: 'scatter',
            coordinateSystem: 'geo',
            symbol:'image://' +  symbolImg,
            symbolSize: 32,
            label: {
              normal: {
                show: true,
                position: 'bottom',
                textStyle: {
                    color: '#fff',
                    fontSize: 12,
                },
                formatter(value) {
                    return value.data.name
                }
              }
            },
            data: convertData(data),
            showEffectOn: 'render',
            rippleEffect: {
                brushType: 'stroke'
            },
            hoverAnimation: true,
            zlevel: 3
          },
          {
            name: '点',
            type: 'scatter',
            coordinateSystem: 'geo',
            symbol: '',
            symbolSize: 24,
            label: {
              normal: {
                show: false,
                position: 'bottom',
                textStyle: {
                    color: '#fff',
                    fontSize: 12,
                },
                formatter(value) {
                    return value.data.name
                }
              }
            },
            data: convertData(data),
            showEffectOn: 'render',
            rippleEffect: {
                brushType: 'stroke'
            },
            hoverAnimation: true,
            zlevel: 2
          },
          {
            name: '点',
            type: 'scatter',
            coordinateSystem: 'geo',
            symbol: '',
            symbolSize: 24,
            label: {
              normal: {
                show: false,
                position: 'bottom',
                textStyle: {
                    color: '#fff',
                    fontSize: 12,
                },
                formatter(value) {
                    return value.data.name
                }
              }
            },
            data: convertData(data),
            showEffectOn: 'render',
            rippleEffect: {
                brushType: 'stroke'
            },
            hoverAnimation: true,
            zlevel: 1
          },
        ]
      }
    this.$echarts.registerMap("map", hunan);
      option && myChart.setOption(option);
      window.addEventListener("resize", function () {
        myChart.resize();
      });
    },
    //跳转详情
    routerUrlClick(url, query) {
      this.$router.push({ path: url, query: query })
    },
    //列表跳转
    handleClick(e){
      const Id = e.target.dataset.id
      this.$router.push({ path:'/details', query: {id:Id} })
    },
  }
}
</script>

<style lang="scss" scoped>
  .map_box{
    display: flex;
    justify-content: space-between;
    .map_left{
      width: 40%;
      padding-top: 108px;
      h3{
        color: #333;
        font-size: 32px;
        display: flex;
        align-items: center;
        &::after{
          content: '';
          width: 120px;
          height: 3px;
          background: #bfdeff;
          margin-left: 20px;
        }
        &::before{
          content: '';
          width: 120px;
          height: 3px;
          background: #bfdeff;
          margin-right: 20px;
        }
        img{
          width: 20px;
          height: 22px;
          margin-right:10px;
        }
      }
      .newsList_box{
        margin-top: 48px;
        background:#9ac9fe;
        padding: 30px 26px 30px;
        .newsList{
          width: 100%;
          height: 662px;
          overflow: hidden;
          ul{
            li{
              padding-bottom: 18px;
              padding-top: 30px;
              border-bottom: solid 1px #b3b3b3;
              &:last-child{
                border-bottom:none;
              }
              h2{
                color: #333;
                font-size: 16px;
                width: 100%;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
                cursor: pointer;
                &:hover{
                  color: #c00202;
                }
              }
              .content{
                display: flex;
                justify-content: space-between;
                margin-top: 15px;
                color: #74818d;
                font-size: 14px;
                p{
                  width: 70%;
                }
                span{
                  width: 28%;
                  text-align: right;
                }
              }
              .btn_box{
                display: flex;
                justify-content: end;
                margin-top: 14px;
                span{
                  font-size: 12px;
                  color: #696c6e;
                  cursor: pointer;
                  &:hover{
                    color: #c00202;
                  }

                }
              }
            }
          }
        }
        .empty{
          width: 100%;
          height: 662px;
          display: flex;
          justify-content: center;
          align-items: center;
          color: #fbfbfb;
          font-size: 32px;
        }
      }
    }
    .map_right{
      width: 58%;
      padding-top: 108px;
      .num_box{
        display: flex;
        justify-content: space-around;
        width: 90%;
        p{
          color: #333;
          span{
            font-size: 18px;
            display: block;
          }
          b{
            font-size: 24px;
            display: block;
          }
        }
      }
      .map{
        width: 100%;
        margin-top: 20px;
        padding-left: 60px;
        .map_bg{
          // background: url(../../../assets/images/index/map.png) no-repeat;
          width: 586px;
          height: 746px;
          position: relative;
          img{
            position: absolute;
            top:183px;
            right:84px;
          }
          #mapBox{
            width: 100%;
            height: 100%;
          }
        }
      }
    }
  }
</style>